/*****************************************************************************************
 **  Author:jxx 2022
 **  QQ:283591387
 **完整文档见：http://v2.volcore.xyz/document/api 【代码生成页面ViewGrid】
 **常用示例见：http://v2.volcore.xyz/document/vueDev
 **后台操作见：http://v2.volcore.xyz/document/netCoreDev
 *****************************************************************************************/
//此js文件是用来自定义扩展业务代码，可以扩展一些自定义页面或者重新配置生成的代码
//此页面为全文档示例代码
//自定义的组件
import gridBody from './Doc_Order1/Doc_Order1GridBody';
import gridFooter from './Doc_Order1/Doc_Order1GridFooter';

let extension = {
  components: {
    //查询界面扩展组件
    gridHeader: '',
    gridBody: gridBody, //按钮下面的提示文字
    gridFooter: gridFooter, //订单明细显示的位置
    //新建、编辑弹出框扩展组件
    modelHeader: '',
    modelBody: '',
    modelFooter: ''
  },
  text: '此页面是对框架所有文档功能进行展示', //界面上的提示文字
  tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
  buttons: { view: [], box: [], detail: [] }, //扩展的按钮
  methods: {
    print() {
      //自定义权限按钮(打印)
      //获取选中的行数据
      let rows = this.getSelectRows();
      if (rows.length === 0) {
        return this.$message.error('请选中要打印的数据');
      }
      //从后台获取返回要打印的内容
      this.http.get('api/Demo_Order/print', {}, true).then((result) => {
        //打印的标签
        let html = '';
        rows.forEach((row) => {
          //订单类型orderType值是数字，从columns里面找到数据源转换为名称
          //字典转换
          let data = this.columns.find((x) => {
            return x.field == 'OrderType';
          }).bind.data;
          //获取字典项
          let obj = data.find((x) => {
            return x.key == row.OrderType;
          });
          let orderType = row.OrderType;
          //如果有查到字典，获取字典的名称
          if (obj) {
            orderType = obj.value;
          }
          //订单日期
          let orderDate = (row.OrderDate || '').substr(0, 10);
          //生成打印的的样式，打印什么样的都自己写css样式
          html += `<div>
               <div style="display:flex;">
                 <div style="flex:1;">订单编号：${row.OrderNo}</div>
                 <div style="flex:1;">订单类型：${orderType}</div>
                 <div style="flex:1;">订单日期：${orderDate}</div>
               </div>
            </div>`;
        });
        html += result;
        //调用打印
        this.printHtml(html);
      });
    },
    printHtml(html) {
      //调用打印
      var iframe = document.createElement('iframe');
      iframe.setAttribute('style', 'position:absolute;width:0;height:0;');
      document.body.appendChild(iframe);

      var doc = iframe.contentWindow.document;
      doc.write(html);
      doc.close();
      iframe.contentWindow.print();
      document.body.removeChild(iframe);
    },
    // activatedLoad(){
    //   this.search();
    // },
    onInit() {
      //设置界面上为单选
      this.single = true;
      //  this.maxBtnLength = 8;
      // this.ck=false;
      this.columnIndex = true;
      //table表格格式化与事件处理
      this.columns.forEach((columm) => {
        if (columm.field == 'TotalQty') {
          //设置总数量字段格式化显示
          columm.formatter = (row) => {
            if (row.TotalQty < 120) {
              return '<a style="color:red;">' + row.TotalQty + '(点击)</a>';
            }
            return '<a style="color:blue;">' + row.TotalQty + '(点击)</a>';
          };
          //设置总数量字段点击事件
          columm.click = (row, column, event) => {
            this.$message.info('点击了单元格');
            //打开弹出框1
            this.$refs.gridBody.openModel1('cellClick');
          };
        }
      });
      //表格添加自定义按钮(删除、编辑)
      this.columns.push({
        field: '操作',
        title: '操作',
        width: 100,
        fixed: 'right', //按钮右浮动
        render: this.getRender() //通过render渲染按钮
      });

      //设置明细表求和，对应后台Demo_OrderService.cs中的方法GetPageData
      this.columns.forEach((column) => {
        //指定主表的求和字段
        if (column.field == 'TotalPrice' || column.field == 'TotalQty') {
          column.summary = true;
        }
      });

      //设置页面表格高度(使用document.body.clientHeight-其他标签的高度)
      // this.tableMaxHeight = 500;
      this.tableMaxHeight = document.body.clientHeight - 260;

      //通过splice往buttons数组指定位置插入数据
      this.buttons.splice(1, 0, {
        name: '按钮1', //按钮名称
        icon: 'el-icon-search', //按钮图标，参照iview图标
        type: 'primary', //按钮类型,可参照iview buttons设置此属性
        hidden: false, //是否隐藏按钮(如果想要隐藏按钮，在onInited方法中遍历buttons，设置hidden=true)
        onClick: function() {
          //打开弹出框1
          this.$refs.gridBody.openModel1();
        }
      });
      //添加第二个按钮
      this.buttons.splice(2, 0, {
        name: '按钮2', //按钮名称
        icon: 'el-icon-search',
        type: 'primary',
        hidden: false,
        onClick: function() {
          //打开弹出框2
          this.$refs.gridBody.openModel2();
        }
      });

      //设置订单日期的时间范围选择
      this.editFormOptions.forEach((options) => {
        options.forEach((item) => {
          if (item.field == 'OrderDate') {
            item.min = '2022-04-05';
            item.max = Date.now(); //2022-04-11
          }
        });
      });
    },
    onInited() {
     // this.detailOptions.xxx
      //设置明细表求和与求平均值，对应后台Demo_OrderService.cs中的方法GetDetailSummary
      this.detailOptions.columns.forEach((column) => {
        //指定明细表的求和字段
        if (column.field == 'Price' || column.field == 'Qty') {
          column.summary = true;
        }
      });
      //设置明细表表格的高度
      this.detailOptions.height = this.detailOptions.height + 40;

      this.detailOptions.beginEdit= (row, column, index) => {
        this.$Message.info("明细表开启编辑")
        return true;
      }
      this.detailOptions.endEditBefore= (row, column, index) => {
        this.$Message.info("明细表结束编辑")
        return true;
      }
     // this.boxOptions.height=document.body.clientHeight*0.9;
    },
    getRender() {
      //生成查询界面表格的按钮
      //通过render渲染按钮
      return (h, { row, column, index }) => {
        //如果使用的vue2版本的代码，直接使用http://v2.volcore.xyz/document/api中voltable中的示例
        return h('div', { style: {} }, [
          h(
            'a',
            {
              style: { 'border-bottom': '1px solid', color: 'blue' },
              onClick: (e) => {
                this.del(row);
              }
            },
            '删除'
          ),
          h(
            'a',
            {
              style: {
                'margin-left': '9px',
                color: 'blue',
                'border-bottom': '1px solid'
              },
              onClick: (e) => {
                this.edit(row);
              }
            },
            '编辑'
          )
        ]);
      };
    },
    searchAfter(rows) {
      //页面查询返回数据时，加载第一条数据的明细
      this.$nextTick(() => {
        this.$refs.gridFooter.rowClick(rows[0]);
      });
      return true;
    },
    rowClick({ row, column, event }) {
      //查询界面点击行事件
      this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
      //调用Doc_Order1GridFooter.vue文件中(订单明细)的查询
      this.$refs.gridFooter.rowClick(row);
    },
    addRow () {
      //明细表添加行，在此处可以设置添加的默认值
      let obj = {Price:1000};
      //给明细表添加行时，设置默认值。--onInited方法中对this.detailOptions.columns进行formatter也可以实现)
      //obj.xx=123;
      this.$refs.detail.addRow(obj);

    },
    modelOpenAfter() {
      //编辑新建弹出框打事件
      this.editFormOptions.forEach((options) => {
        options.forEach((item) => {
          //新建时设置订单状态可以选择，编辑时只读
          if (item.field == 'OrderStatus') {
            if (this.currentAction == 'Add') {
              item.readonly = false;
            } else {
              item.readonly = true;
            }
            // item.readonly=this.currentAction != 'Add';
          }
          //新建时给订单日期设置默认日期、订单状态下拉框默认值
          if (this.currentAction == 'Add') {
            if (item.field == 'OrderDate') {
              //这里的日期暂时是写死的，后面的章节讲封装js方法来获取当前日期
              this.editFormFields.OrderDate = '2022-04-11 00:00:00';
            }
            //给订单状态设置默认值
            if (item.field == 'OrderStatus') {
              //item.data是下拉框的数据源
              let obj = item.data.find((x) => {
                return x.key == '1';
              });
              //绑定下拉框的默认值
              if (obj) {
                this.editFormFields.OrderStatus = obj.key;
              }
            }
          }
        });
      });
    }
  }
};
export default extension;
